<template>
  <el-card class="swiper-container">
    <template #header>
      <div class="header">
        <div class="search">
          <el-input v-model="params.nickname" placeholder="搜索昵称"
            @change="getList"
            clearable
            :style="{
            width: '220px'
          }">
          </el-input>
        </div>
      </div>
    </template>
    <el-table class="table-row-optimize"
      v-loading="state.loading" tooltip-effect="dark"
      ref="multipleTable" :data="state.tableData"
      style="width: 100%" @selection-change="selectionChangeIds">
      <el-table-column type="selection" width="45"/>
      <el-table-column v-viewer label="" align="center" width="100">
        <template #default="scope">
          <div class="user-avatar">
            <img class="img-banner"
              :src="scope.row.avatar"
              @click="preview(scope.row)" :alt="scope.row.nickname"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="昵称">
        <template #default="scope">
          <div class="user-nickname">
            <span class="nickname" v-if="scope.row.gender === 1"
              style="color: #419cfc;">{{ scope.row.nickname }}</span>
            <span class="nickname" v-if="scope.row.gender === 2"
              style="color: #e45a94;">{{ scope.row.nickname }}</span>
            <span class="nickname" v-if="scope.row.gender === 0">{{ scope.row.nickname }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" align="center" max-width="140"/>

      <el-table-column label="注册时间" align="center">
        <template #default="scope">
          {{ toDateTime(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template #default="scope">
          <el-popconfirm width="220"
            cancel-button-text="取消"
            confirm-button-text="确定"
            title="确定要解除该骑手吗？"
            :icon="InfoFilled"
            icon-color="#626AEF"
            @confirm="unbind(scope.row)">
            <template #reference>
              <el-button type="danger">解除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--总数超过一页，再展示分页器-->
    <el-pagination
      background
      layout="prev, pager, next, total"
      :total="state.total"
      :page-size="params.limit"
      :current-page="params.page"
      @current-change="changePage"
    />
  </el-card>

  <!-- Image Preview -->
  <viewer :images="images">
    <img v-for="src in images" :key="src" :src="src">
  </viewer>
</template>

<script setup>
import { InfoFilled } from '@element-plus/icons-vue'
import { toDateTime } from "../../utils";
import { ElMessage } from "element-plus";
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { AdminRiderList, AdminUserPostOnlyStatus, AdminUserUnbindriderPost } from "../../api/server/user";

const { proxy } = getCurrentInstance()
const images = ref([])

const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  checkedIds: [], // 选中项
  total: 0, // 总条数
});

const getCheckedIds = () => {
  return state.checkedIds.length ? state.checkedIds.map(d => d.id) : []
}

const params = reactive({
  page: 1,
  limit: 10,
  nickname: '',
})

onMounted(() => {
  getList()
})

const getList = async () => {
  state.loading = true;

  const { data, total, current_page } = await AdminRiderList(params)
  state.tableData = data
  state.total = total
  params.page = current_page
  state.loading = false;
}

const selectionChangeIds = row => {
  state.checkedIds = row;
}

const preview = (row) => {
  proxy.$viewerApi({ images: [row.avatar] })
}

const unbind = async row => {
  await AdminUserUnbindriderPost({ ids: [row.id] })
  ElMessage.success('骑手已成功解除')
  await getList()
}

const solve = async () => {
  let ids = getCheckedIds()
  if (ids.length === 0) {
    ElMessage.warning('请勾选数据')
    return
  }

  await AdminUserPostOnlyStatus(ids.toString(), { status: 1 })
  ElMessage.success('操作成功')
  await getList()
}

const changePage = (page) => {
  params.page = page
  getList()
}

</script>

<style scoped>

.swiper-container {
  min-height: 100%;
}

:deep(.el-card.is-always-shadow) {
  min-height: 100%;
}

img.img-banner {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px dotted rgb(64 158 255 / 33%);
  object-fit: cover;
  cursor: pointer;
}

.user-avatar {
  position: relative;
}

.user-nickname {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.user-nickname .nickname {
  margin-left: 10px;
}
</style>

